.blue-card {
  background-color: #004477;
  color: #f5fdf4;
  padding: 20px 0;
}
.blue-card h2 {
  font-family: Roboto;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.blue-card p {
  font-family: Roboto;
  font-size: 12px;
  margin-top: 10px;
}
.blue-card h3 {
  font-family: Roboto;
  font-size: 20px;
  font-weight: 700;
  margin: 30px 0;
}
.blue-card .card-box {
  display: grid;
  grid-template-columns: 1fr;
}

.blue-card .card-box .content {
  padding: 30px 0;
}
.blue-card .card-content img {
  margin-top: 30px;
  width: 66px;
}
.blue-card .card-box h4 {
  font-size: 18px;
  font-family: Roboto;
}
.blue-card .card-box p {
  font-family: 10px;
  font-family: Roboto;
}
@media (min-width: 575px) {
  .blue-card .card-box {
    grid-template-columns: 1fr 1fr;
  }
 
  .blue-card .card-content {
    display: flex;
    padding: 0 12px 30px 12px;
  }
  .blue-card .card-content img {
    margin-top: 30px;
    width: 40px;
    height: fit-content;
  }
  .blue-card .card-box .content {
    padding: 30px;
  }
  .blue-card .card-box h4 {
    font-size: 20px;
    font-family: Roboto;
  }
  .blue-card .card-box p {
    font-size: 11px;
    font-family: Roboto;
  }
}
@media (min-width: 992px) {
  .blue-card h2 {
    font-size: 32px;
  }
  .blue-card p {
    font-size: 18px;
  }
  .blue-card h3 {
    font-size: 24px;
  }
  .blue-card .card-content img {
    
    width: 66px;
  }
  .blue-card .card-box h4 {
    font-size: 22px;
    font-family: Roboto;
  }
  .blue-card .card-box p {
    font-size: 15.75px;
    font-family: Roboto;
    line-height: 1.8;
  }
}